import type { App } from "vue";
import { useUserInfoStore } from "@/stores/userInfo";

const registerPermissionDirective = (app: App) => {
  app.directive("permission", (el, binding) => {
    /*
      el 绑定指令的DOM元素
      binding 是一个对象，包含指令内容
        {
          expression: 'count',
          value: 0
        }
        v-permission="'btn.User.add'"

      需求：如果有按钮需要多个权限值才能展示
        v-permission="['btn.User.add', 'btn.User.update']"
        if (!binding.value.every(permission => userInfoStore.buttons.includes(permission))) {
          // 删除DOM元素
          el.remove();
        }
      
      需求：如果有按钮需要多个权限值其中之一，就能展示
        v-permission="['btn.User.add', 'btn.User.update']"
        if (!binding.value.some(permission => userInfoStore.buttons.includes(permission))) {
          // 删除DOM元素
          el.remove();
        }

      需求：需要满足上面两种情况

        v-permission="{
          permission: ['btn.User.add', 'btn.User.update'],
          isAll: true
        }"
        
    */
    const userInfoStore = useUserInfoStore();
    if (!userInfoStore.buttons.includes(binding.value)) {
      // 删除DOM元素
      el.remove();
    }
  });
};

export default registerPermissionDirective;
